<template>
	<ul>
		<li v-for="(item,index) in list" :key="index">
		<router-link :to="'/info/goods/'+item.cargoId">
			<div class="goods-name">
				<p>{{item.cargos[0]&&item.cargos[0].cargoName}}-<i v-if="item.masterCargoType === 1">轻货</i><i v-if="item.masterCargoType === 2">重货</i></p>
			</div>
			<div class="goods-detail">
				<p>重量：<i>{{item.cargos[0]&&item.cargos[0].weight || '-'}}</i><span>/{{item.cargos[0].weightUnit}}</span></p>
				<p>体积：<i>{{item.cargos[0]&&item.cargos[0].volume || '-'}}</i><span>/立方米</span></p>
			</div>
			<div class="goods-need">
				<span class="wy-text-nowrap">需求：{{item.remark||'-'}}</span>
				<button>时效：{{item.validDay}}天</button>
			</div>
		</router-link>
		</li>
	</ul>
</template>
<script>
  export default {
    props: {
        list: {
        	default: () => []
        }
    },
  }
</script>
<style lang="scss" >
.supply-goods{
	.ant-tabs{
		width:1200px;
		height:415px;
		border:1px solid #D8D8D8;
		.ant-tabs-ink-bar{
			background-color:#D8D8D8 !important;
			right:0 !important;
		}
		.ant-tabs-left-content{
   			padding-left:0 !important;
   		}
		.ant-tabs-tab{
		    width: 60px;
		    height: 28px;
		    text-align: center;
		    line-height: 28px;
			margin:0 !important;
			padding:0 !important;
			font-size:14px;
			color:#666666;
			margin: 0 auto !important;
   			margin-top: 22px !important;
		}
		.ant-tabs-tab-active{
			color:#FFFFFF;
			background-color:#15837A;
		}
		.ant-tabs-nav-wrap{
			width:90px;
		}
		ul{
			margin:0;
			li{
				width:330px;
				height:171px;
				background:#FFFFFF;
				border:1px solid #EEEEEE;
				float:left;
				margin-left:18px;
				margin-top:18px;
				overflow:hidden;
				.goods-name{
					width:330px;
					height:50px;
					line-height:50px;
					background:#FFF8EE;
					p{
						color:#333333;
						font-size:16px;
						margin-left:15px;
					}
				}
				.goods-detail{
					margin-top:10px;
					p{
						font-size:16px;
						color:#333333;
						display:inline-block;
						margin-left:15px;
					}
					i{
						font-style:normal;
						color:#FFA200;
						font-size:24px;
					}
					span{
						font-size:16px;
						color:#333333;
					}
					p:last-child{
						margin-left:18px;
					}
				}
				.goods-need{
					width: 328px;
					margin-left:15px;
					margin-top:5px;
					span{
						font-size:16px;
						color:#666666;
						width: 175px;
						display: inline-block;
					}
					button{
						//width:80px;
						//height:30px;
						background:#FFA200;
						outline:none;
						border:none;
						font-size:14px;
						text-align:center;
						line-height:30px;
						margin-left:22px;
						color:#FFFFFF;
						padding: 0 10px;
					}
				}
			}
		}
	}
}
</style>